<template>
    <div id='tmpl'>
        <!--1.0商品轮播图-->
        <div class="silder">
            <silder :imgs='list'></silder>
        </div>
        <!--实现商品购买区-->
        <div id="buy">
            <h4>{{info.title}}</h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价:
                    <s>￥{{info.market_price}}</s> 销售价：
                    <span>￥{{info.sell_price}}</span>
                </li>
                <li>
                    购买数量：
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small">加入购物车</mt-button>
                </li>
            </ul>
        </div>
    
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datafmt('YYYY-MM-DD HH:mm:ss')}}</li>
            </ul>
        </div>
    
        <!--3.0 图文详情-->
        <!--4.0 商品评论-->
        <div id="other">
            <router-link v-bind="{to:'/goods/getdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <mt-button type="danger" size="large">商品评论</mt-button>
        </div>
    </div>
</template>
<script>
//引进轮播图子组件
import silder from '../subcom/silder.vue';
export default {    
    //注册轮播图组件
    components: {
        silder
    },
    data() {
        return {
            id: 0,
            list: [],         //储存轮播图数据
            info:{}           //储存商品详情数据
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getimgs();
        this.getinfo();
    },
    methods: {
        getimgs() {
            var url = 'http://182.254.146.100:8899/api/getthumimages/' + this.id;
            this.$http.get(url).then(function (response) {
                var data = response.body;
                if (data.status !== 0) {
                    this.$tip(data.message);
                }
                this.list = data.message;
            })
        },
        getinfo(){
            var url = this.$common.apidomain+'/api/goods/getinfo/'+this.id;
            this.$http.get(url).then(function (response) {
                var data = response.body;
                if (data.status !== 0) {
                    this.$tip(data.message);
                }
                this.info = data.message[0];
            })
        }
    }
}
</script>
<style scoped>
.silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
}

#buy,
#params,
#other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#buy ul,
#params ul {
    padding-left: 0px;
}

#buy h4 {
    color: #0094ff;
    padding: 5px;
}

#buy li,
#params li {
    list-style: none;
    padding: 8px;
}

#buy .price span {
    color: red;
}

#other .imgdesc {
    margin-bottom: 20px;
}
</style>